<template>
    
    <div class="box">
        <div class="floatBtn">
            <el-button icon="el-icon-refresh" size="mini" type="text" @click="doQuery"></el-button>
        </div>
        <div class="title">大盘信息</div>
        <div class="list">
            <el-row v-for="(item,idx) in topList" :key="idx" class="mt2" :class="getRateColor(item.f3)">
                <span class="colspanbigger"><klinePic :code="item.f12" :name="item.f14" :pre="item.f13" :fclass="getRateColor(item.f3)"></klinePic></span>
                <span class="colspanbigger">{{item.f2}}</span>
                <span class="colspanbigger">{{item.f3}}%</span>
                <span class="colspan" :title="`上涨数量${item.f104}/总数量${item.totalNum}`"  :class="getRateColor(item.uprate-50)">{{item.uprate}}%</span>
            </el-row>
        </div>

        <bkList ref="bkEl"></bkList>
        
        <div class="title">关注列表
        </div>
        <div class="list ">
            <el-row v-for="(item,idx) in list" :key="idx" class="mt5" :class="getRateColor(item.r)">
                <span class="colspanname">
                    <klinePic :code="item.c" :name="item.n" :fclass="getRateColor(item.r)"></klinePic>
                </span>
                <span class="colspanmid">{{item.p}}</span>
                <span class="colspanmid">{{item.r}}%</span>
                <span class="colspan" v-if="!cfg.kplMode">
                    <i class="el-icon-star-on black" v-if="item.watch" @click="item.watch=false"></i>
                    <i class="el-icon-star-off black" v-else @click="item.watch=true"></i>
                    <i class="el-icon-top black" @click="moveUp(item)"></i>
                    <i class="el-icon-bottom black" @click="moveDown(item)"></i>
                    <i class="el-icon-delete black" @click="delItem(item)"></i>
                </span>
                <span class="colspanmid" v-else>{{item.jjzb}}%</span>
            </el-row>
        </div>
    </div>
</template>

<script>

import klinePic from "./klinePic"
import bkList from "./bkList"

export default {
    components:{
        klinePic,
        bkList
    },
    data() {
        return {
            topList:[]
        }
    },
    inject: ['cfg',"isQry","getSleepTime","isMoneyException","addException"],
    computed:{
        list(){
            var list = [].concat(this.cfg.favList)
            var tmplist = list;
            if(!this.cfg.kplMode){
                tmplist = list.sort((a,b)=>{
                    if(!a.watch && !b.watch) return 0;
                    if(a.watch && b.watch) return -1;
                    if(a.watch) return 1;
                    else return -1;
                })
            }
            return tmplist || [];
        }
    },

    mounted() {
        this.startTimer();
    },

    methods: {
        doQuery(){
            this.getAllDetail();
            this.getTopInfo();
            this.$refs.bkEl.doQuery();
        },
        startTimer(){
            this.doQuery();
            this.$once('hook:beforeDestroy', () => {   
                clearTimeout(this.timer);
                clearInterval(this.topTimer);
            })
            this.doTimer();

            this.topTimer = setInterval(()=>{
                if(!this.isQry()) return;
                this.getTopInfo();
            },10000);

        },
        doTimer(){
            clearTimeout(this.timer);
            if(this.isQry()){
                this.getAllDetail();
            }
            var sleep = this.cfg.sleepTime|| this.$config.defSleepTime;
            if(sleep<1000 || isNaN(sleep)) sleep = this.$config.defSleepTime;

            this.timer = setTimeout(()=>{
                this.doTimer();
            },sleep);
        },
        getAllDetail(){
            if(this.cfg.kplMode) return;
            this.list.map((item)=>{
                this.getDetail(item);
            });
        },
        getDetail(item){
            if(item.watch) return; //明细的在组件里查
            var code = item.c;
            var that = this;
            var first = code.substring(0,1);
            if(first=="0" || first=="3" || first=="1"){
                code = "0."+code;
            }else {
                code = "1."+code;
            }
            this.$axios.get(`http://push2.eastmoney.com/api/qt/stock/details/get?fields1=f1,f2,f3,f4&fields2=f51,f52,f53,f54,f55&pos=-61&secid=${code}`)
            .then((res) => {
                if(res.data && res.data.data && res.data.data.details){
                    var datas = res.data.data.details;
                    var prePrice = res.data.data.prePrice;
                    var last = datas[datas.length-1];
                    if(!last && prePrice){
                        item.p = prePrice;
                        item.r = 0;
                        return;
                    }else if(!last){
                        return;
                    }
                    var arr = last.split(",");
                    item.p = arr[1];
                    item.r  = this.rateCount(arr[1]-prePrice,prePrice);
                    item.r = item.r.toFixed(2);
                    item.r = item.r*1;
                    item.prePrice = prePrice*1;
                }else{
                    this.$message.error(JSON.stringify(res.data));
                }
            })

            
        },
        getTopInfo(){
            this.$axios.get(`https://push2.eastmoney.com/api/qt/clist/get?pi=0&pz=10&po=1&np=1&fields=f1,f2,f3,f4,f12,f13,f14,f104,f105,f106&fltt=2&invt=2&ut=13697a1cc677c8bfa9a496437bfef419&fs=i:1.000001,i:0.399001,i:0.399006`)
            .then((res) => {
                if (res.data.data) {
                    this.topList = res.data.data.diff || [];
                    this.topList.map(item=>{
                        item.totalNum = item.f104+item.f105+item.f106;
                        item.uprate = this.avgFormat(item.f104*100,item.totalNum,0)
                    })
                } else {
                    this.$message.error(res.data.message);
                }
            })
        },
        getItemIdx(item){
            for(var i=0;i<this.cfg.favList.length;i++){
                var row = this.cfg.favList[i];
                if(item == row) return i
            }
            return -1;
        },
        delItem(selitem){
            this.$confirm('确认要删除该记录？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var idx = this.getItemIdx(selitem);
                if(idx<0) return;
                this.cfg.favList.splice(idx,1);
            });
        },
        moveUp(selitem){
            var idx = this.getItemIdx(selitem);
            if(idx<=0) return;
            var item = this.cfg.favList.splice(idx,1);
            this.cfg.favList.splice(idx-1,0,item[0]);
        },
        moveDown(selitem){
            var idx = this.getItemIdx(selitem);
            if(idx==this.list.length-1 || idx==-1) return;
            var item = this.cfg.favList.splice(idx,1);
            this.cfg.favList.splice(idx+1,0,item[0]);
        },

        
    }
}
</script>


